<template>
  <van-config-provider :theme-vars="themeVars">
    <van-nav-bar title="手机号登陆" left-arrow @click-left="onClickLeft" />

    <h3 class="pd15">登录体验更多精彩</h3>
    <van-form @submit="onSuccese">
      <van-cell-group inset>
        <van-field
          v-model="value1"
          clearable
          name="pattern"
          placeholder="请输入手机号"
          :rules="[{ pattern, message: '请输入正确的手机号' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              native-type="submit"
              :disabled="btnflag"
            >
              {{ text }}
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <van-popup
      v-model:show="show"
      position="bottom"
      :style="{ height: '60%' }"
      closeable
    >
      <!-- 密码输入框 -->
      <van-password-input
        style="margin-top: 120px"
        :value="yzcode"
        :focused="showKeyboard"
        :mask="false"
        @focus="showKeyboard = true"
        info="请输入验证码"
        :error-info="errorInfo"
        :length="4"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="yzcode"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </van-popup>
  </van-config-provider>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { Toast } from 'vant'
import { sentCode, accountPasswordLogin } from '../../service/api/login.js'
import { resource } from '../../service/api/found.js'
import { useStore } from 'vuex'
const store = useStore()
import { useRouter } from 'vue-router'
const router = useRouter()


onMounted(() => {})

//页面返回
function onClickLeft() {
  console.log(1)
  router.back(-1)
}

const themeVars = {
  rateIconFullColor: '#07c160',
  sliderBarHeight: '4px',
  sliderButtonWidth: '20px',
  sliderButtonHeight: '20px',
  sliderActiveBackgroundColor: '#07c160',
  buttonPrimaryBorderColor: '#DC2C1F',
  buttonPrimaryBackgroundColor: '#DC2C1F'
}

let text = ref('发送验证码')
let btnflag = ref(false)
let value1 = ref('')
let show = ref(false)

const showKeyboard = ref(true)
let yzcode = ref('')
let errorInfo = ref('')
const pattern =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

//表单验证成功回调
const onSuccese = () => {
  sendCode()
}

//发送验证码
async function sendCode() {
  //console.log(tel.value)
  let time = 10
  let loopid = setInterval(() => {
    text.value = time
    --time
    btnflag.value = true
    if (time === 0) {
      btnflag.value = false
      text.value = '发送验证码'
      clearInterval(loopid)
    }
  }, 1000)
  const { data: res } = await sentCode({ phone: value1.value })
  console.log(res)
  if (res.code === 200) {
    show.value = true
  }
}

watch(yzcode, async (newVal) => {
  if (newVal.length === 4) {
    console.log('请求数据')
    const { data: res } = await accountPasswordLogin({
      phone: value1.value,
      captcha: newVal
    })
    console.log(res)
    // errorInfo.value = '密码错误'
    if (res.code !== 200) return Toast.errorInfo('登录失败！')
    Toast.success('登录成功！')

    store.commit('login/SAVE_INFO', res.profile)
    store.commit('login/SEVE_COOKIE', res.cookie)
    localStorage.setItem('cookie', res.cookie)
    console.log(res.cookie)
    router.push('/found')
  } else {
    // errorInfo.value = ''
  }
})
</script>
<style scoped></style>
